import Vue from "vue";
// import App from "./App.vue";

// 开发环境可以设置为true，对应源码目录 src\platforms\web\runtime\index.js
// 这里的配置项可有可无，在导入Vue的过程中其实就根据当前环境判断了是否为生产还是开发
// Vue.config的设置在 src\core\global-api\index.js
Vue.config.productionTip = false;

// // 做了一系列的操作
// // 1. 调用Vue.prototype._init方法 其中会调用Vue.prototype.$mount，其中会调用 mountComponent，这里面会设置 vm.$el = el（也就是#app元素）
// // 2. new Watcher构造的时候会执行一次 updateComponent方法，其中有一个 vm._render，里面会执行 _createElement方法创建组件对应的 vnode
// // 3. updateComponent方法 执行的是Vue.prototype._update，其中主要操作就是 vm.__patch__，对应的具体函数就是patch（这个函数是 createPatchFunction 生成）
// // 4. 第一个参数就是id为app的dom元素，第二个参数就是组件App所对应的 vNode（其中的id为 app1）
// // 5. createEl根据vNode创建元素并插入页面，removeVnodes删除id为app的dom元素
// const childComp = {
//   template: `<div id="app2">{{msg}}</div>`,
//   created() {
//     console.log("child created");
//   },
//   mounted() {
//     console.log("child mounted");
//   },
//   data() {
//     return {
//       msg: "hello Vue",
//     };
//   },
// };

// Vue.mixin({
//   created() {
//     console.log("parent created");
//   },
//   mounted() {
//     console.log("parent mounted");
//   },
// });

// // $mount作用就是根据模板 index.html 找到对应标签在的dom中的位置
// // render函数的作用就是生成 vnode，然后调用patch生成对应的DOM结构并插入刚刚找到的标签位置，注意是覆盖
// new Vue({
//   created() {
//     console.log("Vue created");
//   },
//   mounted() {
//     console.log("Vue mounted");
//   },
//   render: (h) => h(childComp),
// }).$mount("#app");

// 全局组件
// Vue.component("app", App);

// 异步组件
// Vue.component("HelloWorld", () => import("./components/HelloWorld.vue"));

// new Vue({
//   template: `<hello-world />`,
// }).$mount("#app");

const template = `
    <ul :class="{actice: isShow}" class="list" v-if="isShow">
      <li v-for="(item, index) in data" @click="clickItem(index)">{{item}}:{{index}}</li>
    </ul>
`;

new Vue({
  template,
  data() {
    return {
      data: ["vue", "源码", "解析"],
      isShow: true,
    };
  },
  methods: {
    clickItem(idx) {
      console.log(idx);
    },
  },
}).$mount("#app");
